<template>
  <el-row :gutter="10">
    <div id="main" style="width: auto;height:250px;"></div>
    <div id="main2" style="width: auto;height:350px;"></div>
  </el-row>
</template>

<script>
  export default {
    data() {
      return {
        xdata: [],
        ydata: [],
        data: [],
        list: []
      }
    },
    methods: {
      showEcharts() {
        this.$http.get('http://114.55.238.138:9000/api/borrow/getBorrowCounter')
          .then(res => {
            var array = res.data.data;
            for (var i in array) {
              this.xdata.push(array[i].bname);
              this.ydata.push(array[i].counter);
            }

            var myEcharts2 = this.$echarts.init(document.getElementById("main2"));
            myEcharts2.setOption({
              xAxis: {
                axisLabel: {
                  interval: 0,
                  rotate: 10
                },
                type: 'category',
                data: this.xdata
              },
              yAxis: {
                type: 'value'
              },
              series: [{
                data: this.ydata,
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                  color: 'rgba(220, 220, 220, 0.8)'
                },
                itemStyle: {
                  color: "rgba(140, 41, 115, 0.58)"
                }
              }]
            })
          })
          .catch(e => {})

      },
      showRose() {
        this.$http.get('http://114.55.238.138:9000/api/category/getCateBook')
          .then(res => {
            this.list = res.data.data;
            console.info(this.list);
            this.list.forEach(item => {
              console.info(item);
              var obj = {
                name: item['catename'],
                value: item['counter']
              }
              console.info(obj);
              console.info(this.data);
              this.data.push(obj);
              console.info(this.data);
            })
            var myEcharts = this.$echarts.init(document.getElementById("main"));
            myEcharts.setOption({
              series: [{
                type: 'pie',
                data: this.data,
                roseType: 'area'
              }]
            })
          }).catch(e => {})
      }

    },
    created() {
      this.showEcharts();
      this.showRose();
    }
  }
</script>

<style>
</style>
